<template>
	<div id="app">
		<!-- 内容区 -->
		<!-- 
			keep-alive也是一个内置组件，用来缓存路由或者组件
			默认缓存所有，可以使用include缓存指定的路由，属性的值是该路由组件的name
		-->
		<!-- <keep-alive include="home"> -->
		<!-- router-view也是一个内置组件，用来显示不同路由对应的内容 -->
		<!--<transition :name="transitionName">-->
		<router-view></router-view>
		<!-- 导航栏 -->
		<div id="nav" v-show="isNav">
			<Tabbar></Tabbar>
		</div>
	</div>
</template>
<script>

	// 引入vuex中的辅助函数
	import { Toast } from "vant"
	import { mapMutations } from 'vuex'
	import Tabbar from '@/components/Tabbar.vue'

	export default {
		name: 'app',
		data() {
			return {
				isNav: true, // 是否显示底部导航
				transitionName: '',
			}
		},
		components: {
			Tabbar
		},
		/*
			在methods中添加mapMutations
			如果methods中只有一个辅助函数，后面可以直接写成函数名
		*/
		methods: {
			...mapMutations(['changeToken', 'changeUserid', 'changeuserPhone', 'changehomeId', 'changeidCard']), // this.changeToken('123)相当于this.$store.commit('changeToken',123)
		},
		// 使用watch，监听当前组件中的变量
		watch: {
			// 监听路由的跳转
			$route(to, from) {
				// console.log(from,'变成了',to)

				// 获取要跳转过去的路由名称
				const name = to.name
				//this.transitionName = 'slide-left';
				// 只有在首页、商品列表和关于的路由中，才显示底部导航
				this.isNav = /home1|community|mine1/.test(name)
				console.log("跳转了")
				function onLine(callback) {
					var img = new Image();
					img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
					img.onload = function () {
						if (callback) callback(true)
					};
					img.onerror = function () {
						if (callback) callback(false)
					};
				}
				onLine(function (flag) {
					if (flag) {
						// console.log('网络畅通')
					} else {
						Toast('连接失败,请检查网络或重新登录')
					}
				})
				
			}
		},
		// 早于所有的子组件
		created() {
			
			const token = localStorage.getItem('token')
			const userPhone = localStorage.getItem('userPhone')
			const userid = localStorage.getItem('userid')
			const idCard = localStorage.getItem('idCard')
			// 判断是否联网
			function onLine(callback) {
				var img = new Image();
				img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
				img.onload = function () {
					if (callback) callback(true)
				};
				img.onerror = function () {
					if (callback) callback(false)
				};
			}
			onLine(function (flag) {
				if (flag) {
					// console.log('网络畅通')
				} else {
					console.log('连接失败,请检查网络或重新登录')
				}
			})
			// 可以先读取store里面的token
			// console.log(this.$store.state.token)
			// 提交store中的某个mutation，将token存入store
			// this.$store.commit('changeToken',token)
			this.changeToken(token)
			this.changeuserPhone(userPhone)
			this.changeUserid(userid)
			this.changeidCard(idCard)
		},
		// 晚于所有的子组件
		mounted() {
			this.isNav = /home1|community|mine1/.test(this.$route.name)
		},
	}
</script>


<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	ul li {
		list-style: none;
	}

	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.top {
		color: white !important;
		background-color: #4b77e4 !important;
		/* padding-top: 20px; */
	}

	.van-nav-bar__title {
		color: white !important;
		background-color: #4b77e4 !important;
	}

	.van-nav-bar {
		color: white !important;
		background-color: #4b77e4 !important;
	}

	.van-icon-arrow-left {
		color: white !important;
	}

	#nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1rem;
		display: flex;

		a {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 0.3rem;
			font-weight: bold;
			//background-color: gray;
			//color: white;
			text-decoration: none;

			&.router-link-exact-active {
				/* //background-color: green;
				//color: white; */
			}
		}
	}

	.BMap_stdMpCtrl {
		bottom: 80px !important;
	}

	.slide-right-enter-active,
	.slide-right-leave-active,
	.slide-left-enter-active,
	.slide-left-leave-active {
		will-change: transform;
		transition: all 500ms;
		position: absolute;
	}

	.slide-right-enter {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}

	.slide-right-leave-active {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}

	.slide-left-enter {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}

	.slide-left-leave-active {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
</style>